<template>
  <div>
    <el-card class="box-card" style="width: 80%; margin: 20px auto">
      <el-tabs tab-position="left" style="width: 98%">
        <el-tab-pane
          v-for="(group, groupId) in attrGroups"
          :label="group.name"
          :key="group.id"
        >
          <el-form ref="form" :model="dataForm">
            <el-form-item
              v-for="(attr, attrId) in group.attrs"
              :label="attr.name"
              :key="attr.id"
            >
              <el-input
                v-model="dataForm.baseAttrs[groupId][attrId].attrId"
                type="hidden"
                v-show="false"
              ></el-input>
              <el-select
                v-model="dataForm.baseAttrs[groupId][attrId].attrValues"
                :multiple="attr.valueType == 1"
                filterable
                allow-create
                default-first-option
                placeholder="请选择或输入值"
              >
                <el-option
                  v-for="(val, vidx) in attr.valueSelect.split(';')"
                  :key="vidx"
                  :label="val"
                  :value="val"
                ></el-option>
              </el-select>
              <el-checkbox
                style="margin-left: 10px"
                v-model="dataForm.baseAttrs.showDesc"
                :true-label="1"
                :false-label="0"
                >快速展示</el-checkbox
              >
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

      <div style="margin: auto">
        <el-button type="primary" @click="submitBack">上一步</el-button>
        <el-button type="success" @click="submitStep"
          >下一步：设置销售属性</el-button
        >
      </div>
    </el-card>
  </div>
</template>

<script>
import GroupApi from "@/api/product/group";

export default {
  data() {
    return {
      attrGroups: [],
      dataForm: {
        baseAttrs: [],
      },
    };
  },
  methods: {
    init(id) {
      GroupApi.getGrouptWithAttr({
        categoryId: id,
      }).then(({ data }) => {
        //先对表单的baseAttrs进行初始化
        data.forEach((group) => {
          let attrArray = [];
          if (group.attrs != null) {
            group.attrs.forEach((attr) => {
              attrArray.push({
                attrId: attr.id,
                attrName: attr.name,
                attrValues: "",
                showDesc: attr.showDesc,
              });
            });
          }
          this.dataForm.baseAttrs.push(attrArray);
        });
        this.attrGroups = data;
      });
    },
    submitStep() {
      let tempBaseAttr = [];
      this.dataForm.baseAttrs.forEach((group) => {
        group.forEach((attr) => {
          let { attrId, attrName, attrValues, showDesc } = attr;
          //跳过没有录入值的属性
          if (attrValues != "") {
            //判断是否是多值
            if (attrValues instanceof Array) {
              attrValues = attrValues.join(";");
            }
            tempBaseAttr.push({ attrId, attrName, attrValues, showDesc });
          }
        });
      });
      this.$emit("submitData", tempBaseAttr);
    },
    submitBack() {
      this.$emit("backStep", 0);
    },
  },
};
</script>
